<template>
  <div class="SingerDetailBox">
    <div class="SingerDetailLeft">
      <SingerImg ref="singerImg" />
      <ul class="singer_category">
        <router-link
          tag="li"
          :to="{
            name: 'singerdetail',
            query: { id: $route.query.id, name: $route.query.name },
          }"
          :class="!$route.query.type && 'yes_select'"
          >热门作品</router-link
        >
        <router-link
          tag="li"
          :to="{
            name: 'singerdetail',
            query: { id: $route.query.id, name: $route.query.name, type: 1 },
          }"
          :class="$route.query.type == 1 && 'yes_select'"
          >所有专辑</router-link
        >
        <router-link
          tag="li"
          :to="{
            name: 'singerdetail',
            query: { id: $route.query.id, name: $route.query.name, type: 2 },
          }"
          :class="$route.query.type == 2 && 'yes_select'"
          >相关MV</router-link
        >
        <router-link
          tag="li"
          :to="{
            name: 'singerdetail',
            query: { id: $route.query.id, name: $route.query.name, type: 3 },
          }"
          :class="$route.query.type == 3 && 'yes_select'"
          >艺人介绍</router-link
        >
      </ul>
      <div class="singer_content">
        <MusicList ref="musicList" v-show="!$route.query.type" />
        <Album ref="album" v-show="$route.query.type == 1" />
        <MvList ref="mvList" v-show="$route.query.type == 2" />
        <Introduce ref="introduce" v-show="$route.query.type == 3" />
      </div>
    </div>
    <div class="SingerDetailRight">
      <RightDom ref="rightDom" />
      <DownloadApp />
    </div>
  </div>
</template>

<script>
import SingerImg from "@/views/SingerDetail/singerImg.vue";
import Introduce from "@/views/SingerDetail/introduce.vue";
import MusicList from "@/views/SingerDetail/musicList.vue";
import Album from "@/views/SingerDetail/album.vue";
import MvList from "@/views/SingerDetail/mvList.vue";
import RightDom from "@/views/SingerDetail/rightDom.vue";
import DownloadApp from "@/components/DownloadApp";
export default {
  components: {
    Introduce,
    MusicList,
    Album,
    MvList,
    DownloadApp,
    RightDom,
    SingerImg,
  },
  beforeRouteUpdate(to, from, next) {
    next();
    if (to.query.id != from.query.id) {
      this.$refs.singerImg.getData();
      this.$refs.album.getData();
      this.$refs.introduce.getSingerDetail();
      this.$refs.musicList.getSingerMusic();
      this.$refs.mvList.getData();
      this.$refs.rightDom.getData();
    }
  },
};
</script>

<style lang="scss" scoped>
.SingerDetailBox {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  display: flex;
  .SingerDetailLeft {
    padding: 47px 30px 40px 39px;
    flex: 1;
    border-right: 1px solid #d3d3d3;
    overflow: hidden;
    .singer_category {
      display: flex;
      background: #f7f7f7;
      li {
        flex: 1;
        height: 37px;
        border-top: 2px solid #ccc;
        border-bottom: 1px solid #ccc;
        line-height: 37px;
        cursor: pointer;
        text-align: center;
        font-size: 14px;
        &:nth-child(1) {
          border-left: 1px solid #ccc;
        }
        &:nth-child(4) {
          border-right: 1px solid #ccc;
        }
        &.yes_select {
          margin-top: -1;
          border-bottom: none;
          border-right: 1px solid #ccc;
          border-left: 1px solid #ccc;
          border-top: 2px solid #d13030;
          background: #fff;
        }
        &:hover {
          border-top: 2px solid #d13030;
        }
      }
    }
  }
  .SingerDetailRight {
    width: 270px;
    padding: 20px 40px 40px 30px;
    box-sizing: border-box;
  }
}
</style>